.navbar-empty {
  justify-content: center;
  height: var(--header-height);
  background: var(--gl-background-color-default);
  border-bottom: 1px solid var(--gl-border-color-default);

  .tanuki-logo,
  .brand-header-logo {
    max-height: 100%;
  }
}

.set-user-status-modal {
  .modal-body {
    min-height: unset;
  }

  .input-lg {
    max-width: unset;
  }

  .emoji-menu-toggle-button {
    @include emoji-menu-toggle-button;
    padding: $gl-vert-padding $gl-btn-padding;
  }

  .input-group {
    &,
    .input-group-prepend,
    .input-group-append {
      height: $input-height;
    }
  }
}

.nav-links > li > a {
  .badge.badge-pill {
    @include gl-container-width-down(sm, panel) { display: none; }
  }

  @include gl-container-width-down(sm, panel) { margin-right: 3px; }
}

.header-logged-out {
  z-index: $header-zindex;
  min-height: var(--header-height);
  position: fixed;
  top: $calc-system-headers-height;
  left: 0;
  right: 0;
  background-color: var(--gl-color-brand-charcoal);

  @media (forced-colors: active) {
    border-bottom: 1px solid;
  }
}

.header-logged-out-nav {
  position: relative;
  min-height: var(--header-height);
}

.header-logged-out-logo {
  display: flex;
  align-items: center;
  padding: 4px;
  margin-left: -4px;
  height: 32px;
  width: auto;
  @apply gl-rounded-base;

  &:hover,
  &:focus {
    background-color: var(--gl-color-brand-gray-04);
  }

  &:focus,
  &:active {
    @apply gl-focus;
  }

  &:active {
    background-color: var(--gl-color-brand-gray-03);
  }

  img {
    height: 100%;
    width: auto;
  }
}

.header-logged-out-toggle {
  appearance: none;
  border: 0;
  background-color: transparent;
  @apply gl-rounded-base;
}

.header-logged-out-dropdown {
  position: static;

  .dropdown-menu {
    position: absolute;
    width: 100%;
    min-width: 100%;
  }
}

.header-logged-out-nav-item {
  > button,
  > a {
    display: inline-block;
    padding: 6px 8px;
    height: 32px;
    @apply gl-rounded-base;
    color: var(--gl-color-neutral-100);
    font-weight: $gl-font-weight-normal;
    font-size: $gl-font-size;

    &:hover,
    &:focus,
    &:active {
      color: var(--gl-color-neutral-0);
    }

    &:hover,
    &:focus {
      background-color: var(--gl-color-brand-gray-04);
      text-decoration: none;
    }

    &:focus,
    &:active {
      @apply gl-focus;
    }

    &:active {
      background-color: var(--gl-color-brand-gray-03);
    }
  }
}

// Override Bootstrap class with offset for system-header and
// performance bar when present
.fixed-top {
  top: $calc-system-headers-height;
}
